<template>
    <el-card class="box-card" shadow="never">
        <template #header>
            <div class="card-header">
                <span>查询条件</span>
            </div>
        </template>
        <div class="query_form">
            <el-form :model="queryForm" label-width="120px" inline>
                <el-form-item label="一级分类" style="width: 30%">
                    <el-select
                        v-model="queryForm.class1"
                        placeholder="请选择"
                        @change="changeClassOne"
                    >
                        <el-option
                            v-for="(item, index) in classOneArr"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类" style="width: 30%">
                    <el-select
                        v-model="queryForm.class2"
                        placeholder="请选择"
                        @change="changeClassTwo"
                    >
                        <el-option
                            v-for="(item, index) in classTwoArr"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="三级分类" style="width: 30%">
                    <el-select v-model="queryForm.class3" placeholder="请选择">
                        <el-option
                            v-for="(item, index) in classThreeArr"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
    <!-- 查询或新增 -->
    <el-card
        v-if="queryArea"
        class="box-card"
        shadow="never"
        style="margin-top: 20px"
    >
        <template #header>
            <div class="card-header">
                <span>查询结果</span>&nbsp;&nbsp;&nbsp;
                <el-button
                    type="info"
                    size="small"
                    :disabled="queryForm.class3 ? false : true"
                    @click="changeQueryArea"
                    >添加属性</el-button
                >
            </div>
        </template>
        <div class="result_box_form">
            <vxe-table
                :data="tableData"
                align="center"
                :loading="loading"
                border
            >
                <vxe-column type="seq" width="100" title="序号"></vxe-column>
                <vxe-column field="attrName" title="属性名称"></vxe-column>
                <vxe-column title="属性值名称">
                    <template #default="{ row }">
                        <el-tag
                            style="margin-right: 10px"
                            type="primary"
                            v-for="item in row.attrValueList"
                            :key="item.id"
                            >{{ item.valueName }}</el-tag
                        >
                    </template>
                </vxe-column>
                <vxe-column width="200" title="操作">
                    <template #default>
                        <el-button type="primary" size="small" icon="Edit" />
                        <el-button type="danger" size="small" icon="Delete" />
                    </template>
                </vxe-column>
            </vxe-table>
        </div>
    </el-card>
    <el-card v-else class="box-card" shadow="never" style="margin-top: 20px">
        <template #header>
            <div class="card-header">
                <span>添加属性</span>&nbsp;&nbsp;&nbsp;
            </div>
        </template>
        <div class="result_box_form">
            <el-form :model="addForm" label-width="120px" inline>
                <el-form-item label="属性名称" style="width: 30%">
                    <el-input v-model="addForm.name" />
                </el-form-item>
                <el-form-item style="width: 30%">
                    <el-button type="primary" size="small"
                        >添加属性值</el-button
                    >
                    <el-button
                        type="default"
                        size="small"
                        @click="queryArea = !queryArea"
                        >取消</el-button
                    >
                    <el-button type="primary" size="small">保存</el-button>
                </el-form-item>
            </el-form>
            <vxe-table
                :data="addTableData"
                align="center"
                :loading="loading"
                border
            >
                <vxe-column type="seq" width="100" title="序号"></vxe-column>
                <vxe-column title="属性值">
                    <template #default="{ row }">
                        <el-tag
                            style="margin-right: 10px"
                            type="primary"
                            v-for="item in row.attrValueList"
                            :key="item.id"
                            >{{ item.valueName }}</el-tag
                        >
                    </template>
                </vxe-column>
                <vxe-column width="200" title="操作">
                    <template #default>
                        <el-button type="primary" size="small" icon="Edit" />
                        <el-button type="danger" size="small" icon="Delete" />
                    </template>
                </vxe-column>
            </vxe-table>
        </div>
    </el-card>
</template>

<script>
import { defineComponent, ref, onMounted, watch } from "vue"
import {
    getClassOneData,
    getClassTwoData,
    getClassThreeData,
    getTableData,
} from "@/api/product/attr/index"

export default defineComponent({
    name: "attr",
    setup() {
        // 表单的数据
        const queryForm = ref({
            class1: "",
            class2: "",
            class3: "",
        })
        // 表格的数据
        const tableData = ref([])
        // 一级分类的数组
        const classOneArr = ref([])
        // 二级分类的数组
        const classTwoArr = ref([])
        // 三级分类的数组
        const classThreeArr = ref([])
        // loading
        let loading = ref(false)
        // 标识
        let queryArea = ref(true)
        // 新增表单
        let addForm = ref({
            name: "",
        })
        // 新增表格
        const addTableData = ref([])

        onMounted(() => {
            getClass1() // 获取一级接口的数据
        })

        async function getClass1() {
            const res = await getClassOneData()
            if (res.code === 200) {
                classOneArr.value = res.data
            }
        }

        // 改变一级分类
        async function changeClassOne() {
            // 清空二级分类/清空三级分类
            classTwoArr.value = []
            queryForm.value.class2 = ""

            classThreeArr.value = []
            queryForm.value.class3 = ""

            const res = await getClassTwoData(queryForm.value.class1)
            if (res.code === 200) {
                classTwoArr.value = res.data
            }
        }

        // 改变二级分类
        async function changeClassTwo() {
            // 清空三级分类
            classThreeArr.value = []
            queryForm.value.class3 = ""

            const res = await getClassThreeData(queryForm.value.class2)
            if (res.code === 200) {
                classThreeArr.value = res.data
            }
        }

        // 监听class3的值
        watch(
            () => queryForm.value.class3,
            (newVal, oldVal) => {
                // console.log("newVal,oldVal", newVal, "/", oldVal)
                if (newVal) {
                    loading.value = true
                    getTableDataFn()
                } else {
                    tableData.value = []
                }
            }
        )

        async function getTableDataFn() {
            // 使用try...catch...捕获失败的情况
            try {
                const res = await getTableData(
                    queryForm.value.class1,
                    queryForm.value.class2,
                    queryForm.value.class3
                )
                if (res.code === 200) {
                    tableData.value = res.data
                    // console.log("tableData>>>", res.data)
                }
                loading.value = false
            } catch (err) {
                loading.value = false
                // console.log("err", err)
            }
        }

        function changeQueryArea() {
            queryArea.value = !queryArea.value
        }

        return {
            queryForm,
            tableData,
            classOneArr,
            classTwoArr,
            classThreeArr,
            changeClassOne,
            changeClassTwo,
            loading,
            queryArea,
            changeQueryArea,
            addForm,
            addTableData,
        }
    },
})
</script>

<style scoped lang="scss">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

::v-deep .el-card__header {
    display: flex;
    padding: 14px 10px;
    &::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 20px;
        background-color: #4099ff;
        margin-right: 8px;
    }
}
</style>
